<template>
        <div class="messageform">
            <h2>短信登录</h2>
            <svg class="icon mescode" aria-hidden="true" @click="mesJump">
                    <use xlink:href="#icon-diannaojiaobiao" width='60px' height='60px' color='white'></use>
            </svg>
             <el-form  status-icon  label-width="100px" class="demo-ruleForm" :model="loginForm" :rules="rules" ref="loginForm">
                <el-form-item prop="phoneNum">
                    <el-input type="text"  autocomplete="off" placeholder="手机号码" v-model="loginForm.phoneNum" maxlength="11"></el-input>
                </el-form-item>
                <el-form-item  class="verificationCode" prop="captcha">
                    <el-input type="text"  autocomplete="off" placeholder="验证码" v-model="loginForm.captcha"></el-input>
                </el-form-item>
                <!-- 点击获取验证码 -->
                 <button @click="getmesCode" v-text="getCodeText"></button>    
                <el-row>
                    <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
                </el-row>    
            </el-form>
        </div>
</template>
<script>

import * as api from '@/api/users'
import storage from '@/api/storage'

export default ({

    data () {
        return {
            // 设置获取验证码按钮的样式
            getCodeText:'点击获取验证码',
            // 设置一个开关，作用是防抖
            flag:true,
            loginForm:{
                phoneNum:'',
                captcha: ''
            },
             rules: {
                        phoneNum: [
                            { validator: this.validatephoneNum, trigger: 'blur' }
                        ],
                        captcha: [
                            { validator: this.validateCaptcha, trigger: 'blur' }
                        ],
                        submitForm:[
                            { validator:this.submitForm,trigger: 'blur'}
                        ]

                        }
                    };
        },
    
    

    methods: {
                // 封装一个方法，用于存储用户的信息和token
                storageUserInfo({userInfo, token, permission}){
                    // 将用户信息存储到vuex中
                    this.$store.commit('users/SET_USERINFO', userInfo)
                    // console.log(userInfo, token, permission);
                    storage.set('userInfo',userInfo)
                    storage.set('qf-token',token)
                    storage.set('permission',permission)
                    
                },


                validateCaptcha(rule, value, callback){
                    // 验证码必须是五位，不区分大小写
                    let captchaReg = /^[a-zA-Z0-9]{5}$/ig

                    if(captchaReg.test(value)){
                        callback()
                    }else{
                        callback('验证码有误')
                    }       

                },
                validatephoneNum(rule, value, callback){
                    // 设置校验规则,如果value(输入值)符合正则，回调成功，否则回调失败
                   
                    let nameReg = /^[0-9]{11}$/

                    if(nameReg.test(value)){
                        callback()
                    }else{
                        callback('手机号必须是11位')
                    }

                },
                //  设置登录提交的校验规则
                  submitForm(loginForm) {
                       this.$refs['loginForm'].validate(async (valid) => {

                       if (valid) {
                            // 如果本地校验通过了，开始进行手机验证码校验

                            let res = await api.verifyPhoneCaptcha(this.loginForm.captcha)
                            console.log(res);

                            let {state} = res.data

                            if(state){
                                // 将用户信息存储到本地
                                // console.log(res);
                                this.storageUserInfo(res.data)
                                this.$message({
                                    message: '登陆成功',
                                    type: 'success',
                                });
                                this.$router.push('/')
                            }


                       }else{
                           console.log('本地校验不通过');
                            // this.$message.error(res.data.msg)
                       }
                       })
                },




                // 封装用于跳转的方法
                mesJump(){
                    this.$emit('watchChange','normalLogin')
                },




                // 注册获取验证码的方法
                async getmesCode(){
                    // 当点击按钮时，按钮内的文本需要改变,需要变为倒计时

                    // 如果手机号码的长度不是11位，无法获取验证码
                    if(this.loginForm.phoneNum.length === 11){
                                        
                            if(this.flag){
                                this.flag = false


                                // 设置一个变量，用来保存倒计时
                                let countDown = 30

                                // 设置一个定时器，当点击事件被触发，倒计时就开始了
                                let timer = setInterval(()=>{
                                    countDown--
                                    // 改变按钮内的文本
                                    this.getCodeText = `(${countDown})秒后重新获取`

                                    // 如果countDown<1  那么需要停止计时器
                                    if(countDown<1){
                                        clearInterval(timer)
                                        this.getCodeText = '点击获取验证码'

                                        // 必须等到逻辑全部处理完，countDown的值小于1了才可以再次
                                        // 进入判断开启定时器
                                        this.flag = true
                                    }
                                },1000)
                            }else{
                                 this.$message.error(res.data.msg)
                            }
                            

                            let res = await api.getmesCodeApi(this.loginForm.phoneNum)
                            //  根据输入的号码，获取到了验证码
                            // console.log(res);
                        }
                    }
             
    }
})
</script>



<style scoped lang='less'>
        button{
            border: none;
            background: rgba(103, 72, 82, 0.5);
            width: 250px;
            border-radius: 20px;
            height: 30px;
            color: white;
        }

        .demo-ruleForm{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
      
        .mescode{
            position: absolute;
            top: 10px;
            right: 10px;
            width: 60px;
            height: 60px;
        }
     
        .icon-erweima1:before{
           font-size: 50px;
           color: white;
        }


        img{
            height: 42px;
            width: 80px;
            vertical-align:middle;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            background: pink;
            border: none;
            outline: none;
        }

        .captchaInpt{
            height: 40px;
            outline-style: none;
            border: none;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            vertical-align: middle;
        }

        .el-button{
            width: 250px;

        }
       
        /deep/.el-input__inner{
             width: 250px!important;
        }
        

       
        .bg{
            position: fixed;
            right: 0;
            bottom: 0;
            left: 0;
            top: 0;
            video{
                width: 1280px;
            }
        }


     
        /deep/.el-form-item__label{
            width: 60px!important;
            color: white;
        }
        .el-form-item{
            display: flex;
            justify-content: center;
            width: 350px;
        }
        /deep/.el-form-item__content{
            margin: 0!important;
        }
        h2{
            margin: 0;
            margin-left: 20px;
            color: white;
        }
        .el-row{
            text-align: center;
        }
         /deep/.el-button--primary{
            background:rgba(39, 1, 13, 0.5);
      
            border: none;
            border-top-right-radius: 50px;
            border-bottom-left-radius: 50px;
            border-bottom-right-radius: 30px;
            border-top-left-radius: 60px;
            color:white;
            font-size: 20px;
            padding: 0;
            margin-top: 20px;
        }



         .messageform{
            width: 350px;
            height: 400px;
            position: absolute;
            right: 40px;
            top:50px;
            background: url(../../assets/img/pic1.webp);
            background-size: 350px 380px;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            border-radius: 30px;
        } 
</style>

